<template>
  <el-row>
    <el-col :span="8">
      <div class="grid-content bg-purple">
        <el-card class="box-card">
          <div class="top">
            <p>超级管理员：{{ admin }}</p>
          </div>
          <div class="down">
            <div>登录时间：{{ loginTime }}</div>
            <div>登录地点：{{ didian }}</div>
          </div>
        </el-card>
        <el-card style="margin-top: 10px">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="(val, key) in tableList" :prop="key" :key="key" :label="val" />
          </el-table>
        </el-card>
      </div>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <div v-for="p in countList" :key="p.name" class="num_inner">
          <span>{{ p.val }}</span>
          <span>{{ p.name }}</span>
        </div>
      </div>
      <el-card style="height: 260px;margin: 20px 0 0 20px;width: 90%;">
        <div ref="echarts" class="echarts" style="width: 600px;height: 260px;">
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>

import { getData } from "../../api/index"
import *as echarts from "echarts"
export default {
  name: "Home",

  data() {
    return {
      admin: "Admin",
      didian: "南京",
      h: `${new Date().getHours()}`,
      m: `${new Date().getMinutes()}`,
      s: `${new Date().getSeconds()}`,
      tableData: [],
      myechatrs: null,
      option: null,
      tableList: {
        name: "名字",
        monthBuy: "月销售",
        todayBuy: "日销售",
        totalBuy: "总计",
      },
      countList: [
        {
          name: "今日支付订单",
          val: 43534,
          icon: "el-icon-delete",
          color: "aqua"
        },
        {
          name: "今日收藏订单",
          val: 34534,
          icon: "el-icon-delete",
          color: "aqua"
        },
        {
          name: "今日未支付订单",
          val: 345562,
          icon: "el-icon-delete",
          color: "aqua"
        },
        {
          name: "今月支付订单",
          val: 33435,
          icon: "el-icon-delete",
          color: "aqua"
        },
        {
          name: "今月未支付订单",
          val: 345,
          icon: "el-icon-delete",
          color: "aqua"
        },
        {
          name: "今月收藏订单",
          val: 345,
          icon: "el-icon-delete",
          color: "aqua"
        },
      ],
      orderData: {},
      userData: null,
      videoData: null,
      length: null,
    }
  },
  computed: {
    loginTime() {
      return `${new Date().getFullYear()}年-${new Date().getMonth() + 1}月-${new Date().getDate()}日  ${this.h >= 10 ? `${this.h}` : `0${this.h}`}:${this.m >= 10 ? `${this.m}` : `0${this.m}`}:${this.s >= 10 ? `${this.s}` : `0${this.s}`}`
    }
  },
  mounted() {
    getData().then(({ data }) => {
      let { tableData } = data.data
      let { orderData } = data.data
      let { userData } = data.data
      let { videoData } = data.data
      console.log(tableData)
      this.tableData = tableData
      console.log(data)
      const myechatr = echarts.init(this.$refs.echarts)

      console.log(orderData)
      //拿到x轴的数据
      var option = {
      }
      console.log(orderData.data)
      const xAxis = Object.keys(orderData.data[0])
      console.log(xAxis)
      option.xAxis = {
        data: xAxis
      }
      option.legend = {
        data: xAxis
      }

      const series = []
      xAxis.forEach((key) => {
        series.push({
          name: key,
          data: orderData.data.map((item) => { return item[key] }),
          type: 'line'
        })
      })
      //获取y
      option.yAxis = {}
      option.series = series
      option.tooltip = {}
      console.log(option)
      myechatr.setOption(option)
    }).catch(error => {
      console.log(error)
    })
  }
}
</script>

<style lang="less" scoped>
.bg-purple {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .el-card {
    display: flex;
    justify-content: space-between;
    width: 100%;

    //padding: 10px;
    .top {
      border-bottom: 1px solid silver;

    }

    .down {
      //height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
}

.num {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 0 20px;

  .num_inner {
    width: 185px;
    height: 100px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 4px;
    border-radius: 2px;
    gap: 10px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 2px 4px 1px rgba(0,0,0,.09);
  }

}
</style>